<template>
  <a-row :gutter="24" class="search-row">
    <a-col :span="24">
      <x-card>
        <div slot="content" class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="24">
              <a-col :span="6">
                <a-form-item label="数据来源" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select
                    allow-clear
                    placeholder="请选择数据来源"
                    v-model="selectedCheckTypes"
                    mode="multiple"
                    @change="handleCheckTypeChange"
                    style="height: 40px; overflow-y: auto;">
                    <a-select-option value="全部">全部</a-select-option>
                    <a-select-option v-for="item in CheckTypeList" :key="item.id" :value="item.item">{{
                      item.item
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="隐患单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select
                    allowClear
                    showSearch
                    style="width: 100%;"
                    tree-node-filter-prop="title"
                    v-model="DangerOrganizationName"
                    :treeData="QHSEOrganizationTree"
                    v-if="QHSEOrganizationTree.length"
                    @change="handleOrganizationSelectChange"
                    :defaultExpandAll="true"
                    :defaultExpandedKeys="defaultExpandedKeys"
                    :replaceFields="replaceFields"
                    ref="tree"
                    placeholder="请选择隐患单位"
                    :title="DangerOrganizationName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    @change="onChange1"
                    :style="{ width: '100%' }"
                    v-model="TimeOn" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker
                    style="width: 100%"
                    format="YYYY-MM-DD"
                    @change="onChange2"
                    :style="{ width: '100%' }"
                    v-model="TimeEnd" />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item
                  label="隐患专业"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                >
                  <a-select allow-clear placeholder="请选择作业专业" v-model="WorkSpeciality" @change="handleChangeWorSpe">
                    <a-select-option v-for="(item) in workSpecialData" :key="item.id" :value="item.specialty">{{ item.specialty }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="检查单位" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-tree-select
                    allowClear
                    showSearch
                    style="width: 100%;"
                    tree-node-filter-prop="title"
                    v-model="checkOrganizationName"
                    :treeData="QHSEOrganizationTree1"
                    v-if="QHSEOrganizationTree1.length"
                    @change="handleCheckOrganizationSelectChange"
                    :defaultExpandAll="true"
                    :defaultExpandedKeys="defaultExpandedKeys"
                    :replaceFields="replaceFields"
                    ref="tree"
                    placeholder="请选择检查单位"
                    :title="checkOrganizationName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item></a-form-item>
              </a-col>
              <a-col :span="6" style="margin-bottom: 3px;">
                <a-button type="primary" :loading="loading2" @click="handleClick">{{ loading2 ? '查询中...' : '查询' }}</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a-button type="primary" @click="handleExport" :loading="batchExportLoading"><a-icon type="export"/>导出数据</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </x-card>
      <a-row :gutter="48" class="search-row">
        <a-col :span="24">
          <a-divider orientation="left" style="font-weight: bold; margin-bottom: -2px;margin-top: -2px"> 隐患专业分析
          </a-divider>
          <a-card style="overflow-y: hidden" :style="{ height: cardHeight }">
            <!-- <a-progress
              class="prog"
              type="circle"
              :strokeWidth="10"
              :percent="percent"
              :width="200"
              v-if="loading"
            /> -->
            <a-row style="width: 100%; height: 400px;">
              <a-col :span="24">
                <a-radio-group
                  v-if="showRadio"
                  v-model="selectedPeriod"
                  @change="handlePeriodChange"
                  style="margin-left: 120px; margin-bottom: -20px; margin-top: 20px"
                >
                  <a-radio value="周">周</a-radio>
                  <a-radio value="月">月</a-radio>
                  <a-radio value="季度">季度</a-radio>
                  <a-radio value="年">年</a-radio>
                </a-radio-group>
                <div id="line-chart-container" style="width: 100%; height: 400px;"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 600px;">
              <a-col :span="24">
                <div id="bar-chart-container" style="width: 100%; height: 600px;"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 600px;">
              <a-col :span="12">
                <div id="bar-chart-container1" style="width: 100%; height: 450px;"></div>
              </a-col>
              <a-col :span="12">
                <div id="pie-chart-container" style="width: 100%; height: 450px;"></div>
              </a-col>
            </a-row>
            <a-row style="height: 600px; margin-top: -200px;">
              <a-col :span="12">
                <div id="bar-chart-container2" style="width: 100%; height: 600px;"></div>
              </a-col>
              <a-col :span="12">
                <div id="bar-chart-container3" style="width: 100%; height: 600px;"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 800px; margin-top: -200px;">
              <a-col :span="24">
                <div id="bar-chart-container4" style="width: 100%; height: 600px;"></div>
              </a-col>
            </a-row>
            <a-row style="height: 600px; margin-top: -200px;">
              <a-col :span="12">
                <div id="bar-chart-container5" style="width: 100%; height: 600px;"></div>
              </a-col>
              <a-col :span="12">
                <div id="bar-chart-container6" style="width: 100%; height: 600px;"></div>
              </a-col>
            </a-row>
            <a-row style="width: 100%; height: 600px; margin-top: -200px;">
              <a-col :span="24">
                <div id="bar-chart-container7" style="width: 100%; height: 600px;"></div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
  <script>
  import { STable, XCard, XDown } from '@/components'
  import { getQHSEOrganizationTree } from '@/api/modular/system/QHSEOrganization'
  import { getQHSECheckTypeList } from '@/api/modular/system/QHSEHazardQuery'
  import { getWorkSpecialtyList } from '@/api/modular/system/violationManage'
  import {
    getDanSpecialtyTrendAnalysis,
    getDanKeyWorkTypeAnalysis,
    getDanTypeCategoryAnalysis,
    getDanLocationAnalysis,
    getDanStatusAnalysis,
    getDanHseElementAnalysis,
    getDanDirectDepartmentAnalysis,
    getDanCauseAnalysis,
    getDanYHLBAnalysis,
    getDanTypeAnalysis
   } from '@/api/modular/system/QSHEDanSpecialtyAna'
  import * as echarts from 'echarts'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  import * as XLSX from 'xlsx'
  export default {
    components: {
      XDown,
      XCard,
      STable
    },
    data() {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        secondOraName: {
          id: ''
        },
        checkOrganizationName: '',
        DangerOrganizationName: '',
        // 获取参数
        queryParam: {
          TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
          TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
        },
        // 导出参数
        exportParam: {
          TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
          TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
        },
        selectedPeriod: '周',
        TimeOn: moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months'),
        TimeEnd: moment(new Date(), 'YYYY-MM-DD'),
        showRadio: false,
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        tableData5: [],
        tableData6: [],
        tableData7: [],
        tableData8: [],
        tableData9: [],
        tableData10: [],
        workSpecialData: [],
        QHSEOrganizationTree: [],
        QHSEOrganizationTree1: [],
        selectCheckTypes: [],
        CheckTypeList: [], // 数据来源
        selectedCheckTypes: [],
        defaultExpandedKeys: [],
        batchExportLoading: false,
        WorkSpeciality: '',
        cardHeight: '400px',
        chart: false,
        replaceFields: {
          children: 'children',
          title: 'title',
          key: 'workflowId',
          value: 'id',
          parentId: 'parentId'
        },
        loading: false,
        loading2: false,
        percent: 0
      }
    },
    created() {
      this.getQHSEOrganizationTree()
      this.getQHSECheckTypeList()
      this.getWorkSpecialtyList()
    },
    watch: {
      percent(newVal) {
        if (newVal === 100) {
          setTimeout(() => {
            this.percent = 1
            this.loading = false
            this.loading2 = false
            console.log('this.loading2', this.loading2)
          }, 500)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
      window.scrollTo(0, 0)
    })
    },
    computed: {
      ...mapGetters(['userInfo'])
      },
    methods: {
      exportWholePageToExcel() {
      const tablesData = [
        { data: this.tableData1, name: '专业隐患趋势' },
        { data: this.tableData2, name: '关键作业' },
        { data: this.tableData3, name: '隐患级别' },
        { data: this.tableData4, name: '通用以及专业' },
        { data: this.tableData5, name: '隐患区域' },
        { data: this.tableData6, name: '隐患数量' },
        { data: this.tableData7, name: '体系要素' },
        { data: this.tableData8, name: '归属直线部门' },
        { data: this.tableData9, name: '隐患原因' },
        { data: this.tableData10, name: '体系类别' }
      ]
      console.log(tablesData)
       // 创建一个工作簿
      const workbook = XLSX.utils.book_new()
      // 遍历每个表格的数据，将其转换为对应的工作表并添加到工作簿
      tablesData.forEach(({ data, name }, index) => {
        // 将每个数组转换为对应的工作表
        const worksheet = XLSX.utils.json_to_sheet(data)
        // 将工作表添加到工作簿，并使用表格名称作为工作表名称
        XLSX.utils.book_append_sheet(workbook, worksheet, name)
      })
      // 生成Excel文件
      XLSX.writeFile(workbook, '隐患专业分析.xlsx')
      this.batchExportLoading = false
      },
      handleExport() {
        this.batchExportLoading = true
        this.exportWholePageToExcel()
      },
      renderChart(data, containerId, chartType) {
    const barChartContainer = document.getElementById(containerId)
    const barChart = echarts.init(barChartContainer)
    const barChartData = data.map(item => ({
      value: item.value,
      name: item.name
    }))
    if (containerId === 'pie-chart-container') {
      const pieChartOption = {
        title: {
        text: '通用/专业',
        textStyle: {
          fontWeight: 'bold',
          fontSize: 20
        },
        left: 'center' // 标题水平居中
      },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true }
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: barChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              show: true,
              formatter: function(params) {
                return '{b|' + params.name + '}:\n{d|' + params.percent + '%}\n{b|' + '数量' + '}:\n{d|' + params.value + '}'
              },
              rich: {
                b: {
                  fontSize: 16,
                  lineHeight: 24
                },
                d: {
                  fontSize: 16,
                  lineHeight: 24
                }
              }
            },
            tooltip: {
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            }
          }
       ]
     }
       if (barChartData.length > 0) {
         barChart.setOption(pieChartOption)
       }
    } else if (containerId === 'line-chart-container') {
        const lineChartOptions = {
          title: {
            text: '',
            textStyle: {
              fontWeight: 'bold',
              fontSize: 24
            },
            left: 'center' // 标题水平居中
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: '',
            data: null,
            fontSize: 14
          },
          yAxis: {
            type: chartType === 'vertical' ? 'value' : 'category',
            data: null
          },
          series: [
            {
              type: 'line',
              data: barChartData,
              smooth: true,
              lineStyle: {
                color: 'red', // 设置线的颜色为红色
                width: 3
              },
              itemStyle: {
                color: 'gray' // 设置节点的颜色
              },
              label: {
                show: true, // 显示节点的数据
                position: 'top', // 节点数据显示在节点上方
                fontSize: 14
              }
            }
          ]
        }
        lineChartOptions.title.text = this.queryParam.WorkSpeciality + '隐患趋势'
        lineChartOptions.xAxis.type = 'category'
        lineChartOptions.xAxis.data = barChartData.map(item => item.name)
        if (barChartData.length > 0) {
          barChart.setOption(lineChartOptions)
        }
      } else {
      const barChartOptions = {
      title: {
        text: '',
        textStyle: {
          fontWeight: 'bold',
          fontSize: 20
        },
        left: 'center' // 标题水平居中
      },
      grid: {
        containLabel: true,
        top: 60
      },
      xAxis: {
        type: 'category',
        data: null,
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: chartType === 'vertical' ? 'value' : 'category',
        data: null
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      series: [
        {
          type: 'bar',
          data: barChartData,
          barWidth: '40%',
          label: {
            show: true, // 显示标签
            position: 'top',
            formatter: function (params) {
              // 只显示偶数索引的标签
              return params.dataIndex % 2 === 0 ? params.value : ''
            }
          }
        }
      ]
    }
    if (containerId === 'bar-chart-container') {
      barChartOptions.title.text = '关键作业'
      barChartOptions.yAxis.type = 'value'
      barChartOptions.xAxis.data = barChartData.map(item => item.name)
      barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
    } else if (containerId === 'bar-chart-container1') {
       barChartOptions.title.text = '隐患级别'
       barChartOptions.xAxis.type = 'category'
       barChartOptions.xAxis.data = barChartData.map(item => item.name)
       barChartOptions.xAxis.axisLabel = {
       interval: 0,
       fontSize: 14 // 设置较大的字体大小
     }
     } else if (containerId === 'bar-chart-container2') {
      barChartOptions.title.text = '隐患区域'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
     } else if (containerId === 'bar-chart-container3') {
      barChartOptions.title.text = '隐患数量'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
     } else if (containerId === 'bar-chart-container4') {
      barChartOptions.title.text = '体系要素'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
     } else if (containerId === 'bar-chart-container5') {
      barChartOptions.title.text = '归属直线部门'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
     } else if (containerId === 'bar-chart-container6') {
      barChartOptions.title.text = '隐患原因'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
     } else if (containerId === 'bar-chart-container7') {
      barChartOptions.title.text = '隐患类别'
        barChartOptions.yAxis.type = 'value'
        barChartOptions.xAxis.data = barChartData.map(item => item.name)
        barChartOptions.xAxis.axisLabel = {
        formatter: function (value) {
          return value.split('').join('\n') // 在每个字符之间添加换行符
        },
        fontSize: 14 // 设置较大的字体大小
      }
        barChartOptions.series = [
        {
          type: 'bar',
          data: barChartData,
          barWidth: '20%', // 设置较小的值，使柱子变细,
          formatter: function (params) {
            // 只显示偶数索引的标签
            return params.dataIndex % 2 === 0 ? params.value : ''
          }
        }]
     }
      if (barChartData.length > 0) {
        barChart.setOption(barChartOptions)
      }
     }
    },
      handleClick() {
        if (this.queryParam.CheckType.length === 0 || !this.queryParam.DangerOrganizationName || !this.queryParam.WorkSpeciality || !this.TimeOn || !this.TimeEnd) {
          this.$message.warning('请填写完整的查询条件')
        } else {
          this.loading = true
          this.loading2 = true
          this.percent = 1
          this.loadData() // 调用加载数据的方法
          this.loadData1()
          this.loadData2()
          this.loadData3()
          this.loadData4()
          this.loadData5()
          this.loadData6()
          this.loadData7()
          this.loadData8()
          this.handlePeriodChange()
          this.chart = true
          this.showRadio = true
          this.cardHeight = 'auto'
        }
      },
      handleCheckTypeChange(value) {
        if (value.includes('全部')) {
          // 选中了全部选项，将所有选项都添加到 selectedCheckTypes 中
          this.selectedCheckTypes = this.CheckTypeList.map(item => item.item)
        }
        this.queryParam.CheckType = this.selectedCheckTypes.map(option => option.toString())
      },
      // 隐患专业
      handleChangeWorSpe(item) {
        // console.log('value', item)
        this.queryParam.WorkSpeciality = item
      },
      // 加载数据
      loadData() {
        getDanKeyWorkTypeAnalysis(this.queryParam)
          .then(res => {
            this.tableData2 = res.data
            this.renderChart(res.data, 'bar-chart-container', 'horizontal')
            this.percent += 11
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData1() {
        getDanTypeAnalysis(this.queryParam)
          .then(res => {
            this.tableData3 = res.data
            this.renderChart(res.data, 'bar-chart-container1', 'vertical')
            this.percent += 12
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData2() {
        getDanTypeCategoryAnalysis(this.queryParam)
          .then(res => {
            this.tableData4 = res.data
            this.renderChart(res.data, 'pie-chart-container', 'vertical')
            this.percent += 12
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData3() {
        getDanLocationAnalysis(this.queryParam)
          .then(res => {
            this.tableData5 = res.data
            this.renderChart(res.data, 'bar-chart-container2', 'horizontal')
            this.percent += 12
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData4() {
        getDanStatusAnalysis(this.queryParam)
          .then(res => {
            this.tableData6 = res.data
            this.renderChart(res.data, 'bar-chart-container3', 'horizontal')
            this.percent += 10
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData5() {
        getDanHseElementAnalysis(this.queryParam)
          .then(res => {
            this.tableData7 = res.data
            this.renderChart(res.data, 'bar-chart-container4', 'horizontal')
            this.percent += 8
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData6() {
        getDanDirectDepartmentAnalysis(this.queryParam)
          .then(res => {
            this.tableData8 = res.data
            this.renderChart(res.data, 'bar-chart-container5', 'horizontal')
            this.percent += 8
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData7() {
        getDanCauseAnalysis(this.queryParam)
          .then(res => {
            this.tableData9 = res.data
            this.renderChart(res.data, 'bar-chart-container6', 'horizontal')
            this.percent += 8
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
    loadData8() {
      getDanYHLBAnalysis(this.queryParam)
          .then(res => {
            this.tableData10 = res.data
            this.renderChart(res.data, 'bar-chart-container7', 'horizontal')
            this.percent += 9
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      loadData11() {
        getDanSpecialtyTrendAnalysis(this.queryParam)
          .then(res => {
            this.tableData1 = res.data
            this.renderChart(res.data, 'line-chart-container', 'vertical')
            this.percent += 9
          })
          .catch(error => {
            // 处理请求错误
            console.error(error)
            this.loading2 = false
            // 显示错误信息
           this.$message.error('获取数据失败')
          })
      },
      handlePeriodChange() {
      // 根据选中的值发起相应的后端请求
      switch (this.selectedPeriod) {
        case '周':
          this.queryParam.totalDate = '周'
          break
        case '月':
          this.queryParam.totalDate = '月'
          break
        case '季度':
          this.queryParam.totalDate = '季度'
          break
        case '年':
          this.queryParam.totalDate = '年'
          break
        default:
          break
      }
      // 调用加载数据的方法
      this.loadData11()
    },
    onChange1(date, dateString) {
        // console.log(dateString, date)
        if (this.queryParam.TimeEnd && dateString) {
          if (dateString > this.queryParam.TimeEnd) {
            this.$message.error('开始时间不能晚于结束时间')
            this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
            this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
            this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
            this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
          } else {
            this.queryParam.TimeOn = dateString
          }
        } else {
          this.queryParam.TimeOn = dateString
        }
      },
      onChange2(date, dateString) {
        if (this.queryParam.TimeOn && dateString) {
          if (this.queryParam.TimeOn > dateString) {
            this.$message.error('开始时间不能晚于结束时间')
            this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
            this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
            this.queryParam.TimeOn = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD')
            this.queryParam.TimeEnd = moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
          } else {
            this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
          }
        } else {
          this.queryParam.TimeEnd = dateString + 'T' + moment().format('23:59:59')
        }
      },
      // 更改隐患单位
      handleOrganizationSelectChange(val, opt, extra) {
          if (extra.triggerNode === undefined) {
            this.queryParam.DangerOrganizationName = null
            this.queryParam.DangerOrganizationId = null
          } else {
            const option = extra.triggerNode._props.title
            this.queryParam.DangerOrganizationName = option
            this.queryParam.DangerOrganizationId = extra.triggerNode._props.value
            this.DangerOrganizationName = this.queryParam.DangerOrganizationName
          }
        },
           // 更改检查单位
    handleCheckOrganizationSelectChange(val, opt, extra) {
          if (extra.triggerNode === undefined) {
            this.queryParam.checkOrganizationName = null
            this.queryParam.checkOrganizationId = null
          } else {
            const option = extra.triggerNode._props.title
            this.queryParam.checkOrganizationName = option
            this.queryParam.checkOrganizationId = extra.triggerNode._props.value
            this.checkOrganizationName = this.queryParam.checkOrganizationName
          }
        },
      onChangeCheckData(value, label, extra) {
        if (extra.triggerNode === undefined) {
          this.queryParam.CheckOrganizationName = null
          this.queryParam.DangerOrganizationId = null
        } else {
          const option = extra.triggerNode._props.title
          this.queryParam.CheckOrganizationName = option
          this.queryParam.DangerOrganizationId = extra.triggerNode._props.value
        }
      },
      getQHSEOrganizationTree () {
          this.secondOraName.id = this.userInfo.secondOrganizationName
          getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
            console.log('tree:', res.data)
            this.treeLoading = false
            if (!res.success) {
              return
            }
            this.QHSEOrganizationTree = res.data
            if (res.data.length === 0) {
              this.secondOraName.id = '机关总部'
              getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
                this.QHSEOrganizationTree = res.data
                this.queryParam.DangerOrganizationName = res.data[0].title
                this.queryParam.DangerOrganizationId = res.data[0].id
                this.DangerOrganizationName = this.queryParam.DangerOrganizationName
              })
            } else {
              this.queryParam.DangerOrganizationName = res.data[0].title
              this.queryParam.DangerOrganizationId = res.data[0].id
              this.DangerOrganizationName = this.queryParam.DangerOrganizationName
            }
            })
          this.secondOraName.id = '安检院'
          getQHSEOrganizationTree(Object.assign(this.secondOraName)).then(res => {
            // console.log('tree:', res.data)
            this.treeLoading = false
            if (!res.success) {
              return
            }
            this.QHSEOrganizationTree1 = res.data
            this.queryParam.checkOrganizationName = res.data[0].title
            this.queryParam.checkOrganizationId = res.data[0].id
            this.checkOrganizationName = this.queryParam.checkOrganizationName
          })
        },
      getQHSECheckTypeList(text) {
        getQHSECheckTypeList().then((res) => {
          this.CheckTypeList = res.data // 将后端返回的数据赋值给 CheckTypeList
          const select = '全部'
          this.handleCheckTypeChange(select)
        })
      },
      getWorkSpecialtyList () {
        getWorkSpecialtyList(Object.assign(this.queryParam)).then(res => {
          this.treeLoading = false
          if (!res.success) {
            return
          }
          this.workSpecialData = res.data
          this.queryParam.WorkSpeciality = res.data[0].specialty
          this.WorkSpeciality = this.queryParam.WorkSpeciality
        })
      },
      reset() {
        this.queryParam = {
          TimeOn: moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD'),
          TimeEnd: moment(new Date()).format('YYYY-MM-DD') + 'T' + moment().format('23:59:59')
        }
        this.TimeEnd = moment(new Date(), 'YYYY-MM-DD')
        this.TimeOn = moment(new Date(), 'YYYY-MM-DD').subtract(1, 'months')
        this.selectedCheckTypes = []
        this.WorkSpeciality = []
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .table-operator {
    margin-bottom: 18px;
  }

  button {
    margin-right: 8px;
  }

  .search-row {
    display: flex;
    align-items: center;
  }

  .search-buttons {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .chart-container {
    margin-top: 20px;
    /* 调整顶部边距 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
    .prog {
  position: relative;
  top: 90px;
  left: 42%;
}
/deep/.ant-progress-text {
  font-size: 2rem;
}
/deep/.ant-progress-circle-path {
  animation: rotate 3s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
  </style>
